<template>
  <div class="content">
    <h2>{{names.firstName + " " + names.lastname}}</h2>
    <h2>{{ fullName }}</h2>
    <button @click="changeName">changeName</button>
    <h2>{{ scoreLevel }}</h2>
  </div>
</template>

<script>
  import { reactive, computed, ref } from 'vue'
  export default {
    // 之前的写法
    // computed: {
    //   fullName() {
    //     return this.names.firstName + " " + this.names.lastname
    //   }
    // },
    setup() {
      const names = reactive({
        firstName: "Kobe",
        lastname: "Bryant"
      })

      // 普通写法
      // const fullName = computed(() => {
      //   return names.firstName + " " + names.lastname
      // })

      // 完整写法
      const fullName = computed({
        get() {
          return names.firstName + " " + names.lastname
        },
        set(newValue) {
          const namesArr = newValue.split(" ")
          names.firstName = namesArr[0]
          names.lastname = namesArr[1]
        }
      })

      console.log(fullName) // computed返回一个只读的ref对象,即computedRefImpl

      function changeName() {
        fullName.value = "James Harden"
        // fullName = "James Harden" // 错误写法,fullName是一个只读的属性,且我们是要里面的值
      }

      const score = ref(100)
      const scoreLevel = computed(() => {
        return score.value > 90 ? "A" : "B"
      })

      return {
        names,
        fullName,
        scoreLevel,
        changeName
      }
    }
  }
</script>

<style scoped>
</style>